<template>
  <div class="app-container">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-form-item label="所属科目" prop="cid">
        <el-select v-model="dataForm.cid" placeholder="请选择科目" clearable style="width: 200px;margin-right: 15px;"
                   class="filter-item">
          <el-option v-for="item in courses" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="题目类型" prop="type">-->
        <!--<el-select v-model="dataForm.type" placeholder="请选择题目类型" clearable style="width: 200px;margin-right: 15px;"-->
                   <!--class="filter-item">-->
          <!--<el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"/>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="难度" prop="difficulty">
        <el-select v-model="dataForm.difficulty" placeholder="请选择题目类型" clearable style="width: 200px;margin-right: 15px;"
                   class="filter-item">
          <el-option v-for="item in difficultys" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="题目内容" label-width="90px" prop="question">
        <el-input v-model="dataForm.question" :rows="5" type="textarea"/>
      </el-form-item>

      <!--<el-form-item label="选项" prop="options" v-for="item in dataForm.options">-->
      <!--&lt;!&ndash;<span slot="label">{{lableText}}</span>&ndash;&gt;-->
      <!--<el-input v-model="item.contant" placeholder="选项内容" />-->
      <!--</el-form-item>-->
      <el-form-item label="选项：" required>
        <el-form-item :label="item.prefix" :key="item.prefix" v-for="(item,index) in dataForm.options"
                      label-width="50px" class="question-item-label" >
          <el-input v-model="item.prefix" style="width:50px;"/>
          <el-input v-model="item.contant"  class="question-item-contant-input"/>
          <el-button type="danger" size="mini" class="question-item-remove" icon="el-icon-delete"
                     @click="questionItemRemove(index)"></el-button>
        </el-form-item>
      </el-form-item>
      <el-form-item label="答案解析" label-width="90px" prop="answerExplain">
        <el-input v-model="dataForm.answerExplain" :rows="5" type="textarea"/>
      </el-form-item>
      <!--<el-form-item label="答案">-->
      <!--<el-input v-model="dataForm.answer" placeholder="内容" />-->
      <!--</el-form-item>-->
      <el-form-item label="正确答案:" label-width="90px" prop="answer" required>
        <el-radio-group v-model="dataForm.answer">
          <el-radio v-for="item in dataForm.options" :key="item.prefix" :label="item.prefix">{{item.prefix}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--<el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">-->
      <!--<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">-->
      <!--<el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="邮箱" prop="email">-->
      <!--<el-input v-model="dataForm.email" placeholder="邮箱"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="手机号" prop="mobile">-->
      <!--<el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="角色" size="mini" prop="roleIdList">-->
      <!--<el-checkbox-group v-model="dataForm.roleIdList">-->
      <!--<el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>-->
      <!--</el-checkbox-group>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="状态" size="mini" prop="status">-->
      <!--<el-radio-group v-model="dataForm.status">-->
      <!--<el-radio :label="0">禁用</el-radio>-->
      <!--<el-radio :label="1">正常</el-radio>-->
      <!--</el-radio-group>-->
      <!--</el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <!--<el-button @click="visible = false">取消</el-button>-->
      <el-button @click="resetForm">重置</el-button>
      <el-button type="success" @click="questionItemAdd">添加选项</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <!--<el-dialog :visible.sync="richEditor.dialogVisible" append-to-body :close-on-click-modal="false"-->
               <!--style="width: 100%;height: 100%" :show-close="false" center>-->
      <!--<el-input :rows="5" type="textarea" />-->
      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button type="primary" @click="editorConfirm">确 定</el-button>-->
        <!--<el-button @click="richEditor.dialogVisible = false">取 消</el-button>-->
      <!--</span>-->
    <!--</el-dialog>-->
  </div>

</template>

<script>
  // import Ueditor from '@/components/Ueditor'

  export default {
    // components: {
    //   Ueditor
    // },
    computed: {

    },
    data () {
      return {
        visible: false,
        lableText: '选项：',
        // list: [],
        courses: [
          {
            id: 1,
            name: 'java'
          },
          {
            id: 2,
            name: '数学'
          }
        ],
        difficultys: [
          {
            id: 1,
            name: '简单'
          },
          {
            id: 2,
            name: '正常'
          },
          {
            id: 3,
            name: '较难'
          },
          {
            id: 4,
            name: '困难'
          },
          {
            id: 5,
            name: '超难'
          }
        ],
        types: [
          {
            id: 0,
            name: '单选题'
          },
          {
            id: 1,
            name: '多选题'
          },
          {
            id: 2,
            name: '判断题'
          }
        ],
        // richEditor: {
        //   dialogVisible: false,
        //   object: null,
        //   parameterName: '',
        //   instance: null
        // },
        // roleList: [],
        dataForm: {
          id: 0,
          cid: '',
          type: '0',
          difficulty: '',
          question: '',
          options: [
            {prefix: 'A', contant: ''},
            {prefix: 'B', contant: ''},
            {prefix: 'C', contant: ''},
            {prefix: 'D', contant: ''}
          ],
          answerExplain: '',
          answer: '',
          createTime: '',
          updatetime: ''
          // email: ''
          // mobile: '',
          // roleIdList: [],
          // status: 1
        },
        dataRule: {
          question: [
            {required: true, message: '问题不能为空', trigger: 'blur'}
          ],
          answer: [
            {required: true, message: '答案不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // sureFn () {
      //   let params = {val: null, data:null}
      //   for (let i = 0, j = 10, i<j,j++) {
      //     this.list.push(Object.assign({}, params))
      //   }
      // },
      // editorConfirm () {
      //   let contant = this.richEditor.object.contant
      //   this.richEditor.object[this.richEditor.parameterName] = contant
      //   this.richEditor.dialogVisible = false
      // },
      // inputClick (object, parameterName) {
      //   this.richEditor.object = object
      //   this.richEditor.parameterName = parameterName
      //   this.richEditor.dialogVisible = true
      // },
      resetForm () {
        this.$refs['dataForm'].resetFields()
      },
      questionItemRemove (index) {
        this.dataForm.options.splice(index, 1)
      },
      questionItemAdd () {
        let items = this.dataForm.options
        console.log('items', items)
        let last = items[items.length - 1]
        let newLastPrefix = String.fromCharCode(last.prefix.charCodeAt() + 1)
        items.push({id: null, prefix: newLastPrefix, contant: ''})
        this.dataForm.options = items
        console.log('this.dataForm.options', this.dataForm.options)
      },
      init (id) {
        // this.dataForm.id = id || 0
        // this.$http({
        //   url: this.$http.adornUrl('/sys/role/select'),
        //   method: 'get',
        //   params: this.$http.adornParams()
        // }).then(({data}) => {
        //   this.roleList = data && data.code === 0 ? data.list : []
        // }).then(() => {
        //   this.visible = true
        //   this.$nextTick(() => {
        //     this.$refs['dataForm'].resetFields()
        //   })
        // }).then(() => {
        if (id) {
          this.$http({
            url: this.$http.adornUrl('/examTitle/getTitleDetail'),
            method: 'get',
            params: this.$http.adornParams({
              'id': id
            })
          }).then(({data}) => {
            this.visible = true
            if (data && data.code === 0) {
              this.dataForm = data.titleDetail.examTitle
              console.log('dataFrom', this.dataForm)
              this.dataForm.options = data.titleDetail.optionsList
              // for (var i = 0; i < data.titleDetail.optionsList.length; i++) {
              //   if (i === 0) {
              //     this.dataForm.options.push('valueText', 'A')
              //   }
              // }
              console.log('options', this.dataForm.options)
            }
          })
        }
        // })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          console.log('this.dataForm.options', this.dataForm.options)
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/examTitle/addTitle'),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id,
                'cid': this.dataForm.cid,
                'type': this.dataForm.type,
                'difficulty': this.dataForm.difficulty,
                'question': this.dataForm.question,
                'options': this.dataForm.options,
                'answerExplain': this.dataForm.answerExplain,
                'answer': this.dataForm.answer
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
                this.$router.push({name: 'modules-examTitle-titleList'})
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    },
    created () {
      let id = this.$route.params.id || 0
      console.log('id', id)
      console.log('11111111111111111111111111111111111111')
      this.init(id)
    }
  }
</script>
